<template>
	<uv-popup class="m-navbar_drawer" overlayOpacity='0' ref="refInfo" mode="right" closeIconPos="top-left" :closeable="true">
		<view class="user_info" :style="{'--user-drawer-width': drawerWidth+'px'}">
			<view class="user_pic">
				<uv-upload 
				  @afterRead="afterRead"
				  name="userPic"
				  :maxCount="1"
				  width="48"
				  height="48"
				>
					<uv-image :src="userPic" width="48" height="48" shape="circle"></uv-image>
				</uv-upload>
				<uv-text type="tips" text="点击上传头像"></uv-text>
			</view>
			<uv-list class="user_data">
				<uv-list-item title="昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:" clickable border
				:right-text="userInfo.nickName" show-arrow @click="editInfo(1)"
				></uv-list-item>
				<uv-list-item title="用户名称:" :right-text="userInfo.userName" border></uv-list-item>
				<uv-list-item title="修改密码:" border show-arrow  clickable @click="editInfo(2)"></uv-list-item>
				<uv-list-item title="手机号码:" :right-text="userInfo.phonenumber" border></uv-list-item>
				<uv-list-item title="邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:" clickable
				:right-text="userInfo.email" border show-arrow @click="editInfo(3)"></uv-list-item>
				<uv-list-item title="所属部门:" :right-text="dept.deptName" border></uv-list-item>
			</uv-list>
		</view>
	</uv-popup>
	<edit ref="refEdit"></edit>
</template>

<script setup name="userInfo">
	import { storeToRefs } from 'pinia'
	import { computed, ref, inject } from 'vue';
	
	import { userStore } from '@/stores/user'
	
	import edit from './edit.vue'
	import avatar from'@/static/images/user/avatar.png'
	
	const { api } = inject('global')
	
	const refInfo = ref(null);
	const refEdit = ref(null)
	
	const drawerWidth = computed(() => {
		return uni.upx2px(584)
	})
	
	const userPic = computed(() => {
		const global = inject('global');
		const { userInfo } = userStore()
		return userInfo?.avatar?(global.baseFileUrl + userInfo.avatar) : avatar
	})
	
	const userInfo = computed(() => {
		const { userInfo } = userStore()
		return userInfo
	})
	
	const dept = computed(() => {
		const { dept } = userStore()
		return dept
	})
	
	const open = () => {
		refInfo.value.open();
	}
	// 修改用户信息 type: 1 昵称，2密码，3 邮箱
	const editInfo = (type) => {
		refEdit.value.open(type)
	}
	
	const afterRead = (file) => {
		api.user.updateavator(file.file.url).then(str=> {
			const res = JSON.parse(str)
			if(res.code == 200) {
				const { getInfo } = userStore()
				getInfo()
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		})
	}
	// 向上暴露
	defineExpose({
	  open,
	});
</script>

<style scoped lang="scss">
.user_info {
	margin-top: 44px;
	width: var(--user-drawer-width);
	padding-top:  var(--status-bar-height);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.user_pic {
	height: 160rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.user_data {
	width: calc(100% - 48rpx);
	margin: 0 24rpx;
	margin-top: 24rpx;
}
</style>